<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员首页 - 银行业务管理系统</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/css/all.min.css" rel="stylesheet">
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background-color: #f8f9fa;
        }
        
        .navbar-brand {
            font-weight: bold;
            color: #007bff !important;
        }
        
        .sidebar {
            min-height: calc(100vh - 56px);
            background-color: #343a40;
            padding-top: 20px;
        }
        
        .sidebar .nav-link {
            color: #adb5bd;
            padding: 10px 20px;
            border-radius: 0;
        }
        
        .sidebar .nav-link:hover,
        .sidebar .nav-link.active {
            color: #fff;
            background-color: #495057;
        }
        
        .main-content {
            padding: 20px;
        }
        
        .stats-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
            transition: transform 0.3s ease;
        }
        
        .stats-card:hover {
            transform: translateY(-5px);
        }
        
        .stats-card.success {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        }
        
        .stats-card.warning {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }
        
        .stats-card.info {
            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
        }
        
        .stats-number {
            font-size: 2.5rem;
            font-weight: bold;
            margin-bottom: 5px;
        }
        
        .stats-label {
            font-size: 1rem;
            opacity: 0.9;
        }
        
        .stats-icon {
            font-size: 3rem;
            opacity: 0.3;
            position: absolute;
            right: 20px;
            top: 20px;
        }
        
        .card {
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
            border: 1px solid rgba(0, 0, 0, 0.125);
            margin-bottom: 20px;
        }
        
        .card-header {
            background-color: #f8f9fa;
            border-bottom: 1px solid rgba(0, 0, 0, 0.125);
            font-weight: 600;
        }
        
        .quick-action-btn {
            margin: 5px;
            padding: 15px 20px;
            border-radius: 8px;
            transition: all 0.3s ease;
        }
        
        .quick-action-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="/admin">
                <i class="fas fa-university"></i>
                银行业务管理系统 - 管理员
            </a>
            
            <div class="navbar-nav ml-auto">
                <a class="nav-link" href="/">
                    <i class="fas fa-home"></i> 返回首页
                </a>
            </div>
        </div>
    </nav>

    <div class="container-fluid">
        <div class="row">
            <!-- 侧边栏 -->
            <nav class="col-md-2 d-none d-md-block sidebar">
                <div class="sidebar-sticky">
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a class="nav-link active" href="/admin">
                                <i class="fas fa-university"></i> 快捷操作
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/admin/customers">
                                <i class="fas fa-users"></i> 客户管理
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/admin/cards">
                                <i class="fas fa-credit-card"></i> 银行卡管理
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/admin/deposit-types">
                                <i class="fas fa-piggy-bank"></i> 存款业务管理
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/admin/trades">
                                <i class="fas fa-exchange-alt"></i> 交易管理
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#" data-toggle="collapse" data-target="#viewsSubmenu" aria-expanded="true">
                                <i class="fas fa-eye"></i> 视图查询 <i class="fas fa-caret-down"></i>
                            </a>
                            <div class="collapse show" id="viewsSubmenu">
                                <ul class="nav flex-column ml-3">
                                    <li class="nav-item">
                                        <a class="nav-link" href="/admin/views/customer-cards">
                                            <i class="fas fa-credit-card"></i> 客户银行卡视图
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="/admin/views/trade-details">
                                            <i class="fas fa-list-alt"></i> 交易明细视图
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
            </nav>

            <!-- 主内容区 -->
            <main class="col-md-10 ml-sm-auto main-content">
                <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                    <h1 class="h2">
                        <i class="fas fa-university"></i> 银行业务管理系统
                    </h1>
                    <div class="btn-toolbar mb-2 mb-md-0">
                        <div class="btn-group mr-2">
                            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="location.reload()">
                                <i class="fas fa-sync-alt"></i> 刷新数据
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 核心业务功能模块 -->
                <!--<div class="row">-->
                <!--    <div class="col-12">-->
                <!--        <div class="card">-->
                <!--            <div class="card-header">-->
                <!--                <i class="fas fa-tasks"></i> 核心业务功能模块（70分）-->
                <!--            </div>-->
                <!--            <div class="card-body">-->
                <!--                <div class="row">-->
                <!--                    &lt;!&ndash; 管理员模块 35分 &ndash;&gt;-->
                <!--                    <div class="col-md-6">-->
                <!--                        <h5 class="text-primary mb-3">-->
                <!--                            <i class="fas fa-user-shield"></i> 管理员模块（35分）-->
                <!--                        </h5>-->
                <!--                        <div class="list-group">-->
                <!--                            <a href="/admin/customers" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">-->
                <!--                                <div>-->
                <!--                                    <i class="fas fa-users text-primary"></i>-->
                <!--                                    <strong>客户管理</strong>-->
                <!--                                    <small class="text-muted d-block">CRUD、分页、查询、导出</small>-->
                <!--                                </div>-->
                <!--                                <span class="badge badge-primary badge-pill">10分</span>-->
                <!--                            </a>-->
                <!--                            <a href="/admin/cards" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">-->
                <!--                                <div>-->
                <!--                                    <i class="fas fa-credit-card text-success"></i>-->
                <!--                                    <strong>银行卡管理</strong>-->
                <!--                                    <small class="text-muted d-block">开户、销户、查询、统计</small>-->
                <!--                                </div>-->
                <!--                                <span class="badge badge-success badge-pill">10分</span>-->
                <!--                            </a>-->
                <!--                            <a href="/admin/deposit-types" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">-->
                <!--                                <div>-->
                <!--                                    <i class="fas fa-piggy-bank text-info"></i>-->
                <!--                                    <strong>存款业务管理</strong>-->
                <!--                                    <small class="text-muted d-block">存款类型管理、业务统计</small>-->
                <!--                                </div>-->
                <!--                                <span class="badge badge-info badge-pill">10分</span>-->
                <!--                            </a>-->
                <!--                            <a href="/admin/trades" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">-->
                <!--                                <div>-->
                <!--                                    <i class="fas fa-search text-warning"></i>-->
                <!--                                    <strong>综合查询</strong>-->
                <!--                                    <small class="text-muted d-block">多条件查询、报表导出</small>-->
                <!--                                </div>-->
                <!--                                <span class="badge badge-warning badge-pill">5分</span>-->
                <!--                            </a>-->
                <!--                        </div>-->
                <!--                    </div>-->
                
                <!--                    &lt;!&ndash; 客户模块 15分 &ndash;&gt;-->
                <!--                    <div class="col-md-6">-->
                <!--                        <h5 class="text-success mb-3">-->
                <!--                            <i class="fas fa-user"></i> 客户模块（15分）-->
                <!--                        </h5>-->
                <!--                        <div class="list-group">-->
                <!--                            <a href="/customer/balance" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">-->
                <!--                                <div>-->
                <!--                                    <i class="fas fa-wallet text-primary"></i>-->
                <!--                                    <strong>余额查询</strong>-->
                <!--                                    <small class="text-muted d-block">密码验证、余额显示</small>-->
                <!--                                </div>-->
                <!--                                <span class="badge badge-primary badge-pill">5分</span>-->
                <!--                            </a>-->
                <!--                            <a href="/customer/trades" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">-->
                <!--                                <div>-->
                <!--                                    <i class="fas fa-history text-success"></i>-->
                <!--                                    <strong>交易查询</strong>-->
                <!--                                    <small class="text-muted d-block">个人交易记录查询</small>-->
                <!--                                </div>-->
                <!--                                <span class="badge badge-success badge-pill">5分</span>-->
                <!--                            </a>-->
                <!--                            <a href="/customer/deposit-withdraw" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">-->
                <!--                                <div>-->
                <!--                                    <i class="fas fa-exchange-alt text-info"></i>-->
                <!--                                    <strong>存取款</strong>-->
                <!--                                    <small class="text-muted d-block">存款、取款操作</small>-->
                <!--                                </div>-->
                <!--                                <span class="badge badge-info badge-pill">3分</span>-->
                <!--                            </a>-->
                <!--                            <a href="/customer/account" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">-->
                <!--                                <div>-->
                <!--                                    <i class="fas fa-cog text-warning"></i>-->
                <!--                                    <strong>账户管理</strong>-->
                <!--                                    <small class="text-muted d-block">挂失、解挂、改密</small>-->
                <!--                                </div>-->
                <!--                                <span class="badge badge-warning badge-pill">2分</span>-->
                <!--                            </a>-->
                <!--                        </div>-->
                <!--                    </div>-->
                <!--                </div>-->
                <!--            </div>-->
                <!--        </div>-->
                <!--    </div>-->
                <!--</div>-->

                <!-- 高级功能模块 -->
                <!--<div class="row">-->
                <!--    <div class="col-12">-->
                <!--        <div class="card">-->
                <!--            <div class="card-header">-->
                <!--                <i class="fas fa-star"></i> 高级功能模块（20分）-->
                <!--            </div>-->
                <!--            <div class="card-body">-->
                <!--                <div class="row">-->
                <!--                    <div class="col-md-4">-->
                <!--                        <div class="card border-primary">-->
                <!--                            <div class="card-header bg-primary text-white">-->
                <!--                                <i class="fas fa-eye"></i> 视图查询（8分）-->
                <!--                            </div>-->
                <!--                            <div class="card-body">-->
                <!--                                <div class="list-group list-group-flush">-->
                <!--                                    <a href="/admin/views/customer-cards" class="list-group-item list-group-item-action">-->
                <!--                                        <i class="fas fa-credit-card"></i> 客户银行卡视图-->
                <!--                                    </a>-->
                <!--                                    <a href="/admin/views/trade-details" class="list-group-item list-group-item-action">-->
                <!--                                        <i class="fas fa-list-alt"></i> 交易明细视图-->
                <!--                                    </a>-->
                <!--                                </div>-->
                <!--                            </div>-->
                <!--                        </div>-->
                <!--                    </div>-->
                <!--                    <div class="col-md-4">-->
                <!--                        <div class="card border-success">-->
                <!--                            <div class="card-header bg-success text-white">-->
                <!--                                <i class="fas fa-cogs"></i> 存储过程（6分）-->
                <!--                            </div>-->
                <!--                            <div class="card-body">-->
                <!--                                <div class="list-group list-group-flush">-->
                <!--                                    <a href="/customer/transfer" class="list-group-item list-group-item-action">-->
                <!--                                        <i class="fas fa-exchange-alt"></i> 转账存储过程-->
                <!--                                        <small class="text-muted d-block">sp_transfer</small>-->
                <!--                                    </a>-->
                <!--                                    <div class="list-group-item">-->
                <!--                                        <i class="fas fa-shield-alt"></i> 事务安全保障-->
                <!--                                        <small class="text-muted d-block">自动回滚机制</small>-->
                <!--                                    </div>-->
                <!--                                </div>-->
                <!--                            </div>-->
                <!--                        </div>-->
                <!--                    </div>-->
                <!--                    <div class="col-md-4">-->
                <!--                        <div class="card border-info">-->
                <!--                            <div class="card-header bg-info text-white">-->
                <!--                                <i class="fas fa-download"></i> 报表导出（6分）-->
                <!--                            </div>-->
                <!--                            <div class="card-body">-->
                <!--                                <div class="list-group list-group-flush">-->
                <!--                                    <div class="list-group-item">-->
                <!--                                        <i class="fas fa-file-csv"></i> 客户信息导出-->
                <!--                                    </div>-->
                <!--                                    <div class="list-group-item">-->
                <!--                                        <i class="fas fa-file-csv"></i> 银行卡信息导出-->
                <!--                                    </div>-->
                <!--                                    <div class="list-group-item">-->
                <!--                                        <i class="fas fa-file-csv"></i> 交易记录导出-->
                <!--                                    </div>-->
                <!--                                    <div class="list-group-item">-->
                <!--                                        <i class="fas fa-file-csv"></i> 统计报表导出-->
                <!--                                    </div>-->
                <!--                                </div>-->
                <!--                            </div>-->
                <!--                        </div>-->
                <!--                    </div>-->
                <!--                </div>-->
                <!--            </div>-->
                <!--        </div>-->
                <!--    </div>-->
                <!--</div>-->

                <!-- 实时业务数据统计 -->
                <!--<div class="row">-->
                <!--    &lt;!&ndash; 客户与银行卡数据 &ndash;&gt;-->
                <!--    <div class="col-md-6">-->
                <!--        <div class="card">-->
                <!--            <div class="card-header">-->
                <!--                <i class="fas fa-database"></i> 客户与银行卡数据-->
                <!--            </div>-->
                <!--            <div class="card-body">-->
                <!--                <div class="row">-->
                <!--                    <div class="col-6">-->
                <!--                        <h4 class="text-primary" th:text="${customerCount != null ? customerCount : 0}">0</h4>-->
                <!--                        <small class="text-muted">注册客户总数</small>-->
                <!--                    </div>-->
                <!--                    <div class="col-6">-->
                <!--                        <h4 class="text-success" th:text="${cardStatistics != null ? cardStatistics.totalCount : 0}">0</h4>-->
                <!--                        <small class="text-muted">银行卡总数</small>-->
                <!--                    </div>-->
                <!--                </div>-->
                <!--                <hr>-->
                <!--                <div class="row">-->
                <!--                    <div class="col-6">-->
                <!--                        <h5 class="text-danger" th:text="${cardStatistics != null ? cardStatistics.reportLossCount : 0}">0</h5>-->
                <!--                        <small class="text-muted">挂失银行卡</small>-->
                <!--                    </div>-->
                <!--                    <div class="col-6">-->
                <!--                        <h5 class="text-info" th:text="${depositTypeCount != null ? depositTypeCount : 0}">0</h5>-->
                <!--                        <small class="text-muted">存款类型数</small>-->
                <!--                    </div>-->
                <!--                </div>-->
                <!--                <hr>-->
                <!--                <div class="text-center">-->
                <!--                    <h4 class="text-success">-->
                <!--                        ¥<span th:text="${cardStatistics != null ? #numbers.formatDecimal(cardStatistics.totalBalance, 1, 2) : '0.00'}">0.00</span>-->
                <!--                    </h4>-->
                <!--                    <small class="text-muted">银行总资金</small>-->
                <!--                </div>-->
                <!--            </div>-->
                <!--        </div>-->
                <!--    </div>-->
                
                <!--    &lt;!&ndash; 交易业务数据 &ndash;&gt;-->
                <!--    <div class="col-md-6">-->
                <!--        <div class="card">-->
                <!--            <div class="card-header">-->
                <!--                <i class="fas fa-chart-line"></i> 交易业务数据-->
                <!--            </div>-->
                <!--            <div class="card-body">-->
                <!--                <div class="row">-->
                <!--                    <div class="col-12 text-center mb-3">-->
                <!--                        <h4 class="text-primary" th:text="${tradeStatistics != null ? tradeStatistics.totalCount : 0}">0</h4>-->
                <!--                        <small class="text-muted">交易总笔数</small>-->
                <!--                    </div>-->
                <!--                </div>-->
                <!--                <div class="row">-->
                <!--                    <div class="col-4 text-center">-->
                <!--                        <h5 class="text-success" th:text="${tradeStatistics != null ? tradeStatistics.depositCount : 0}">0</h5>-->
                <!--                        <small class="text-muted">存入笔数</small>-->
                <!--                    </div>-->
                <!--                    <div class="col-4 text-center">-->
                <!--                        <h5 class="text-warning" th:text="${tradeStatistics != null ? tradeStatistics.withdrawCount : 0}">0</h5>-->
                <!--                        <small class="text-muted">支取笔数</small>-->
                <!--                    </div>-->
                <!--                    <div class="col-4 text-center">-->
                <!--                        <h5 class="text-info" th:text="${tradeStatistics != null ? tradeStatistics.transferCount : 0}">0</h5>-->
                <!--                        <small class="text-muted">转账笔数</small>-->
                <!--                    </div>-->
                <!--                </div>-->
                <!--                <hr>-->
                <!--                <div class="text-center">-->
                <!--                    <h4 class="text-success">-->
                <!--                        ¥<span th:text="${tradeStatistics != null ? #numbers.formatDecimal(tradeStatistics.depositAmount, 1, 2) : '0.00'}">0.00</span>-->
                <!--                    </h4>-->
                <!--                    <small class="text-muted">累计存款金额</small>-->
                <!--                </div>-->
                <!--            </div>-->
                <!--        </div>-->
                <!--    </div>-->
                <!--</div>-->

                <!-- 快速操作入口 -->
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <i class="fas fa-rocket"></i> 快速操作入口
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-3">
                                        <a href="/admin/customers" class="btn btn-primary btn-block quick-action-btn">
                                            <i class="fas fa-user-plus"></i><br>
                                            客户管理
                                        </a>
                                    </div>
                                    <div class="col-md-3">
                                        <a href="/admin/cards" class="btn btn-success btn-block quick-action-btn">
                                            <i class="fas fa-credit-card"></i><br>
                                            银行卡管理
                                        </a>
                                    </div>
                                    <div class="col-md-3">
                                        <a href="/admin/deposit-types" class="btn btn-info btn-block quick-action-btn">
                                            <i class="fas fa-piggy-bank"></i><br>
                                            存款业务管理
                                        </a>
                                    </div>
                                    <div class="col-md-3">
                                        <a href="/admin/trades" class="btn btn-warning btn-block quick-action-btn">
                                            <i class="fas fa-search"></i><br>
                                            综合查询
                                        </a>
                                    </div>
                                </div>
                                <div class="row mt-3">
                                    <div class="col-md-4">
                                        <a href="/admin/views/customer-cards" class="btn btn-outline-primary btn-block quick-action-btn">
                                            <i class="fas fa-eye"></i><br>
                                            客户银行卡视图
                                        </a>
                                    </div>
                                    <div class="col-md-4">
                                        <a href="/admin/views/trade-details" class="btn btn-outline-success btn-block quick-action-btn">
                                            <i class="fas fa-list-alt"></i><br>
                                            交易明细视图
                                        </a>
                                    </div>
                                    <div class="col-md-4">
                                        <a href="/customer" class="btn btn-outline-info btn-block quick-action-btn">
                                            <i class="fas fa-user"></i><br>
                                            客户服务入口
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <!-- JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        $(document).ready(function() {
            // 添加页面加载动画
            $('.stats-card').hide().each(function(index) {
                $(this).delay(index * 100).fadeIn(500);
            });
            
            $('.card').hide().delay(600).fadeIn(800);
            
            // 实时时间显示
            function updateTime() {
                var now = new Date();
                var timeString = now.toLocaleString('zh-CN', {
                    year: 'numeric',
                    month: '2-digit',
                    day: '2-digit',
                    hour: '2-digit',
                    minute: '2-digit',
                    second: '2-digit'
                });
                $('#current-time').text(timeString);
            }
            
            // 每秒更新时间
            setInterval(updateTime, 1000);
            updateTime();
        });
    </script>
</body>
</html>
